<template>
<div>
  <el-upload
      with-credentials
      :action="`${BASE_URL}${importUrl}`"
      :show-file-list="false"
      :on-success="contractUpload"
      :before-upload="contractBeforeUpload"
    >
    <el-button size="mini" type="primary">{{importName}}</el-button>
  </el-upload>
  <el-dialog
      class="dialog"
      title="数据导入完成"
      :visible.sync="importVisible"
      width="450"
      >
      <div class="msg_suc">导入成功数据：{{importData.success}}条</div>
      <div class="msg_suc">导入失败数据：{{importData.fail}}条</div>
      <div v-for="(item,index) in importData.messages" class="msg" :key="index">
        <div class="msg_item">{{item}}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importVisible = false">关 闭</el-button>
        <el-button type="primary" @click="importVisible = false">确 定</el-button>
      </span>
    </el-dialog>
</div>
  
</template>
<script>
export default {
   props: {
    importName: {
      type: String,
      default: "导入"
    },
    importUrl: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      //导入
      BASE_URL: process.env.VUE_APP_BASE_URL,
      importVisible:false,
      importData:{
        fail:null,
        success:null,
        meaasges:null
      },
    }
  },
  methods:{
    contractUpload(res) {
      if (res.code === 0) {
        this.importVisible = true;
        this.importData = res.data;
      } else {
        this.$message({
          type: "error",
          message: res.msg
        });
      }
      this.importLoading.close();
      this.$parent.$parent.$parent.$parent.getTable()
    },
    contractBeforeUpload(file) {
      const type = /\.xlsx?$/.test(file.name);
      if (!type) {
        this.$message.error("请上传excel格式的文件");
      }
      this.importLoading = this.$loading({
        lock: true,
        text: "正在导入...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      return type;
    },
  }
}
</script>

